<template>
	<view class="sn-content">
		
		<u-list @scrolltolower="scrolltolower" :scrollable="isRoll" v-if="indexList.length!=0">
			<u-list-item
				v-for="(newsdata, index) in indexList"
				:key="newsdata.id"
			>
				<ui-newsList @itemClick="tonewsDetails" :newsdata="newsdata"></ui-newsList>
			
			</u-list-item>
			
			<view v-if="flag">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>

		<u-empty
				v-else
				text="暂无校园要闻哦!"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				flag: false,
				isRoll: true,
				scrollSite: 0,
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			tonewsDetails(id){
				//跳转上报修详细页面(使用uview, 默认navigateTo; to,redirectTo,switchTab,reLaunch,navigateBack)
				uni.$u.route({
					url: 'pages/news-details/news-details',
					type: 'to',
					params: {
						id: id
					}
				})
			},
			loadmore() {
				//模拟加载完毕
				if(this.indexList.length >= 30){
					this.flag = true
					this.isRoll = false
					return
				}
				for (let i = 0; i < 10; i++) {
					this.indexList.push({
						id: uni.$u.guid(11),
						newsImage: 'https://ask.dcloud.net.cn/uploads/avatar/000/15/86/43_avatar_max.jpg',
						newsCreatTime: uni.$u.timeFormat(new Date().getTime(), 'yyyy-MM-dd hh:mm'),
						newsTitle: '关于的取名来由，首字母u来自于uni-app首字母，uni-app是基Vuejs，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中最础最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它示感谢。'
					})
				}
			},
			scrolltolower() {
				this.loadmore()
			},
			
		}
	}
</script>

<style lang="scss">
	.sn-content{
		// min-height: 100vh;
		// background-color: rgb(242, 242, 242);
		
	}
</style>
